<template>
<div class="tmp" ref="content">
  <div>
    <div class="content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in newsList">
          <router-link v-bind='{to:"/news/newsInfo/"+item.id}'>
            <img class="mui-media-object mui-pull-left" :src="item.img_url">
            <div class="mui-media-body">
              {{item.title}}
              <p class='mui-ellipsis'>
                发布时间：{{item.add_time | timefmt}}
                <span>点击量{{item.click}}</span>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
import Vue from 'vue';
  import apiUrl from '../common/common';
  import { MessageBox } from 'mint-ui';


  export default{
    data(){
        return {
            newsList:[]
        }
    },
    methods:{
        getNews(){
            this.$http.get(apiUrl.apiUrl+'/api/getnewslist').then(res=>{
                if (res.body.status!==0){
                  MessageBox('提示', '数据获取错误');
                  return;
                }
                this.newsList=res.body.message;
                this.$nextTick(()=>{
                  this.scroll = new BScroll(this.$refs.content, {
                      click:true
                  })
                })

            })
        }
    },
    created(){
        this.getNews();

    },
    updated(){

    }
  }
</script>
<style scoped>
  .mui-ellipsis{
    position: relative;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
.mui-ellipsis span{
  position: absolute;
  right: 5px;
  top:0;
}
  .mui-table-view{
    width: 100%;
  }
  .mui-table-view li{
    width: 100%;
  }

</style>

